<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- <input type="text" placeholder="请输入内容" v-model="searchText"> -->
        <input type="text" placeholder="请输入内容" v-model="searchText">

        <ul>
            <li v-for="person in newPersons" :key="person.id">
                {{person.name}} - {{person.age}}
            </li>
        </ul>
        <button>年龄升序</button>
        <button>年龄降序</button>
        <button>原始排序</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const vm = new Vue({
            data: {
                persons: [
                    { id: 1, name: "小王", age: 35 },
                    { id: 2, name: "中王", age: 65 },
                    { id: 3, name: "老王", age: 17 },
                    { id: 4, name: "孙悟空", age: 63 },
                    { id: 5, name: "唐僧", age: 14 },
                    { id: 6, name: "沙和尚", age: 53 },
                    { id: 7, name: "猪八戒", age: 26 },
                    { id: 8, name: "小白龙", age: 30 },
                    { id: 9, name: "观音", age: 500 },
                ],
                searchText: "",
                showButton: false,
                /*  methods: {
                     searchPersons() {
                         this.newPersons = this.persons.filter((person) =>
                             person.name.includes(this.searchText));
                     },
                 }, */

            },

            computed: {
                newPersons() {
                    return this.persons.filter((person) =>
                        person.name.includes(this.searchText)
                    )
                },
            },
        })


        vm.$mount("#app");
    </script>
</body>

</html>